<!-- 三维地球态势组件 -->
<template>
  <div class="cesium-globe-container">
    <!-- 地球容器 -->
    <div ref="cesiumContainer" class="cesium-viewer" v-show="viewMode === '3d'">
      <!-- 模拟的3D地球视图 -->
      <div class="globe-simulation">
        <div class="globe-sphere">
          <div class="globe-grid"></div>
          
          <!-- 航迹显示 -->
          <div class="track-layer">
            <div 
              v-for="track in trackData" 
              :key="track.id"
              class="track-marker"
              :class="[`track-${track.type}`, { selected: selectedTrack === track.id }]"
              :style="getTrackPosition(track)"
              @click="selectTrack(track)"
            >
              <div class="track-icon">{{ getTrackIcon(track.type) }}</div>
              <div class="track-trail"></div>
              <div class="track-info" v-if="selectedTrack === track.id">
                <div class="info-item">速度: {{ track.speed }}km/h</div>
                <div class="info-item">航向: {{ track.heading }}°</div>
                <div class="info-item">高度: {{ track.position[2] }}m</div>
              </div>
            </div>
          </div>

          <!-- 威力圈显示 -->
          <div class="power-circles-layer">
            <div 
              v-for="circle in powerCircles" 
              :key="`circle-${circle.center[0]}-${circle.center[1]}`"
              class="power-circle"
              :class="`power-${circle.type}`"
              :style="getPowerCircleStyle(circle)"
            >
              <div class="circle-center"></div>
              <div class="circle-ring"></div>
              <div class="power-label">{{ circle.power }}dBm</div>
            </div>
          </div>

          <!-- 干扰源热力图 */
          <div class="heatmap-layer" v-if="showHeatmap">
            <div 
              v-for="(point, index) in interferenceHeatmap" 
              :key="`heat-${index}`"
              class="heat-point"
              :style="getHeatPointStyle(point)"
            >
              <div class="heat-gradient" :style="{ opacity: point.intensity }"></div>
            </div>
          </div>

          <!-- 地标和标注 -->
          <div class="landmarks-layer">
            <div class="landmark beijing" style="top: 35%; left: 45%;">
              <div class="landmark-dot"></div>
              <div class="landmark-label">北京</div>
            </div>
            <div class="landmark shanghai" style="top: 55%; left: 55%;">
              <div class="landmark-dot"></div>
              <div class="landmark-label">上海</div>
            </div>
            <div class="landmark guangzhou" style="top: 75%; left: 50%;">
              <div class="landmark-dot"></div>
              <div class="landmark-label">广州</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 2D视图 -->
    <div ref="mapContainer" class="map-2d-viewer" v-show="viewMode === '2d'">
      <div class="map-2d-simulation">
        <div class="map-background"></div>
        
        <!-- 2D航迹 -->
        <div class="track-layer-2d">
          <div 
            v-for="track in trackData" 
            :key="`2d-${track.id}`"
            class="track-marker-2d"
            :class="[`track-${track.type}`, { selected: selectedTrack === track.id }]"
            :style="getTrack2DPosition(track)"
            @click="selectTrack(track)"
          >
            <div class="track-icon-2d">{{ getTrackIcon(track.type) }}</div>
          </div>
        </div>

        <!-- 2D威力圈 -->
        <div class="power-circles-layer-2d">
          <div 
            v-for="circle in powerCircles" 
            :key="`2d-circle-${circle.center[0]}-${circle.center[1]}`"
            class="power-circle-2d"
            :class="`power-${circle.type}`"
            :style="getPowerCircle2DStyle(circle)"
          ></div>
        </div>
      </div>
    </div>

    <!-- 控制面板 -->
    <div class="globe-controls">
      <div class="control-group">
        <el-button-group size="small">
          <el-button @click="resetView" title="重置视图">
            <el-icon><Refresh /></el-icon>
          </el-button>
          <el-button @click="toggleHeatmap" title="切换热力图">
            <el-icon><TrendCharts /></el-icon>
          </el-button>
          <el-button @click="toggleFullscreen" title="全屏">
            <el-icon><FullScreen /></el-icon>
          </el-button>
        </el-button-group>
      </div>

      <div class="layer-controls">
        <el-checkbox v-model="showTracks" @change="toggleLayer('tracks')">航迹</el-checkbox>
        <el-checkbox v-model="showPowerCircles" @change="toggleLayer('power')">威力圈</el-checkbox>
        <el-checkbox v-model="showHeatmap" @change="toggleLayer('heatmap')">热力图</el-checkbox>
        <el-checkbox v-model="showLandmarks" @change="toggleLayer('landmarks')">地标</el-checkbox>
      </div>
    </div>

    <!-- 图例 -->
    <div class="globe-legend">
      <div class="legend-title">图例</div>
      <div class="legend-items">
        <div class="legend-item">
          <div class="legend-color track-aircraft"></div>
          <span>飞机</span>
        </div>
        <div class="legend-item">
          <div class="legend-color track-ship"></div>
          <span>舰船</span>
        </div>
        <div class="legend-item">
          <div class="legend-color track-vehicle"></div>
          <span>车辆</span>
        </div>
        <div class="legend-item">
          <div class="legend-color power-radar"></div>
          <span>雷达</span>
        </div>
        <div class="legend-item">
          <div class="legend-color power-comm"></div>
          <span>通信</span>
        </div>
        <div class="legend-item">
          <div class="legend-color power-jammer"></div>
          <span>干扰</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, TrendCharts, FullScreen } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  viewMode: {
    type: String,
    default: '3d'
  },
  trackData: {
    type: Array,
    default: () => []
  },
  powerCircles: {
    type: Array,
    default: () => []
  },
  interferenceHeatmap: {
    type: Array,
    default: () => []
  }
})

// Emits
const emit = defineEmits(['markerClick', 'trackSelect'])

// 组件引用
const cesiumContainer = ref(null)
const mapContainer = ref(null)

// 状态
const selectedTrack = ref(null)
const showTracks = ref(true)
const showPowerCircles = ref(true)
const showHeatmap = ref(true)
const showLandmarks = ref(true)

// 计算航迹位置（3D）
const getTrackPosition = (track) => {
  // 将经纬度转换为屏幕坐标
  const x = ((track.position[0] - 110) / 20) * 100 // 简化的坐标转换
  const y = ((track.position[1] - 35) / 15) * 100
  return {
    left: `${Math.max(0, Math.min(100, x))}%`,
    top: `${Math.max(0, Math.min(100, y))}%`
  }
}

// 计算航迹位置（2D）
const getTrack2DPosition = (track) => {
  const x = ((track.position[0] - 110) / 20) * 100
  const y = ((track.position[1] - 35) / 15) * 100
  return {
    left: `${Math.max(0, Math.min(100, x))}%`,
    top: `${Math.max(0, Math.min(100, y))}%`
  }
}

// 获取航迹图标
const getTrackIcon = (type) => {
  const icons = {
    aircraft: '✈',
    ship: '⛵',
    vehicle: '🚗'
  }
  return icons[type] || '📍'
}

// 计算威力圈样式（3D）
const getPowerCircleStyle = (circle) => {
  const x = ((circle.center[0] - 110) / 20) * 100
  const y = ((circle.center[1] - 35) / 15) * 100
  const radius = Math.min(circle.radius / 2000, 20) // 缩放半径
  
  return {
    left: `${Math.max(0, Math.min(100, x))}%`,
    top: `${Math.max(0, Math.min(100, y))}%`,
    width: `${radius}%`,
    height: `${radius}%`,
    opacity: circle.power / 100
  }
}

// 计算威力圈样式（2D）
const getPowerCircle2DStyle = (circle) => {
  return getPowerCircleStyle(circle)
}

// 计算热力点样式
const getHeatPointStyle = (point) => {
  const x = ((point.position[0] - 110) / 20) * 100
  const y = ((point.position[1] - 35) / 15) * 100
  
  return {
    left: `${Math.max(0, Math.min(100, x))}%`,
    top: `${Math.max(0, Math.min(100, y))}%`
  }
}

// 选择航迹
const selectTrack = (track) => {
  selectedTrack.value = track.id
  emit('trackSelect', track)
  emit('markerClick', { id: track.id, type: track.type, data: track })
}

// 重置视图
const resetView = () => {
  selectedTrack.value = null
  ElMessage.success('视图已重置')
}

// 切换热力图
const toggleHeatmap = () => {
  showHeatmap.value = !showHeatmap.value
  ElMessage.info(`热力图已${showHeatmap.value ? '开启' : '关闭'}`)
}

// 切换全屏
const toggleFullscreen = () => {
  const container = viewMode.value === '3d' ? cesiumContainer.value : mapContainer.value
  if (container) {
    if (document.fullscreenElement) {
      document.exitFullscreen()
    } else {
      container.requestFullscreen()
    }
  }
}

// 切换图层
const toggleLayer = (layer) => {
  ElMessage.info(`${layer}图层已${eval(`show${layer.charAt(0).toUpperCase() + layer.slice(1)}`).value ? '开启' : '关闭'}`)
}

// 同步视图（供父组件调用）
const syncView = (view) => {
  console.log('Syncing view:', view)
}

// 同步缩放（供父组件调用）
const syncZoom = (zoom) => {
  console.log('Syncing zoom:', zoom)
}

// 暴露方法给父组件
defineExpose({
  syncView,
  syncZoom,
  resetView
})

// 监听视图模式变化
watch(() => props.viewMode, (newMode) => {
  selectedTrack.value = null
})

// 生命周期
onMounted(() => {
  // 初始化Cesium或OpenLayers
  console.log('Globe component mounted')
})

onBeforeUnmount(() => {
  // 清理资源
  console.log('Globe component unmounted')
})
</script>

<style scoped>
.cesium-globe-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 3D视图容器 */
.cesium-viewer {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #1a2332 0%, #0a0f1b 100%);
}

.globe-simulation {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.globe-sphere {
  width: 60vh;
  height: 60vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(0, 212, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at center, #1a4a5c 0%, #0a1f2b  70%, #051015 100%);
  border: 1px solid rgba(0, 212, 255, 0.3);
  box-shadow: 
    inset 0 0 5vh rgba(0, 212, 255, 0.2),
    0 0 3vh rgba(0, 212, 255, 0.1);
  animation: rotate 60s linear infinite;
}

@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.globe-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 8%, rgba(0, 212, 255, 0.1) 10%),
    repeating-linear-gradient(90deg, transparent, transparent 8%, rgba(0, 212, 255, 0.1) 10%);
}

/* 2D视图容器 */
.map-2d-viewer {
  width: 100%;
  height: 100%;
  background: #0a0f1b;
}

.map-2d-simulation {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-background {
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(45deg, #1a2332 25%, transparent 25%),
    linear-gradient(-45deg, #1a2332 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a2332 75%),
    linear-gradient(-45deg, transparent 75%, #1a2332 75%);
  background-size: 2vh 2vh;
  background-position: 0 0, 0 1vh, 1vh -1vh, -1vh 0px;
  opacity: 0.3;
}

/* 航迹图层 */
.track-layer, .track-layer-2d {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.track-marker, .track-marker-2d {
  position: absolute;
  pointer-events: all;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.track-marker:hover, .track-marker-2d:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

.track-marker.selected, .track-marker-2d.selected {
  z-index: 10;
}

.track-icon, .track-icon-2d {
  width: 2.5vh;
  height: 2.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1rem;
  color: white;
  text-shadow: 0 0 0.5vh currentColor;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.track-aircraft .track-icon,
.track-aircraft .track-icon-2d {
  background: rgba(255, 170, 0, 0.8);
  box-shadow: 0 0 1vh rgba(255, 170, 0, 0.5);
}

.track-ship .track-icon,
.track-ship .track-icon-2d {
  background: rgba(0, 255, 136, 0.8);
  box-shadow: 0 0 1vh rgba(0, 255, 136, 0.5);
}

.track-vehicle .track-icon,
.track-vehicle .track-icon-2d {
  background: rgba(255, 100, 100, 0.8);
  box-shadow: 0 0 1vh rgba(255, 100, 100, 0.5);
}

.track-trail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  height: 0.2vh;
  background: linear-gradient(90deg, currentColor, transparent);
  transform: translate(-100%, -50%);
  opacity: 0.6;
}

.track-info {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 0.5vh;
  padding: 0.5vh 1vh;
  font-size: 0.7rem;
  color: #bfcbd9;
  white-space: nowrap;
  margin-top: 0.5vh;
}

.info-item {
  margin: 0.2vh 0;
}

/* 威力圈图层 */
.power-circles-layer, .power-circles-layer-2d {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.power-circle, .power-circle-2d {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: powerPulse 3s ease-in-out infinite;
}

@keyframes powerPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

.power-radar {
  border: 2px solid rgba(255, 170, 0, 0.6);
  background: radial-gradient(circle, rgba(255, 170, 0, 0.1) 0%, transparent 70%);
}

.power-comm {
  border: 2px solid rgba(0, 255, 136, 0.6);
  background: radial-gradient(circle, rgba(0, 255, 136, 0.1) 0%, transparent 70%);
}

.power-jammer {
  border: 2px solid rgba(255, 100, 100, 0.6);
  background: radial-gradient(circle, rgba(255, 100, 100, 0.1) 0%, transparent 70%);
}

.circle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8vh;
  height: 0.8vh;
  background: currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.circle-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
}

.power-label {
  position: absolute;
  top: -2vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: currentColor;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.2vh 0.5vh;
  border-radius: 0.3vh;
  white-space: nowrap;
}

/* 热力图图层 */
.heatmap-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.heat-point {
  position: absolute;
  width: 8vh;
  height: 8vh;
  transform: translate(-50%, -50%);
}

.heat-gradient {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.8) 0%, rgba(255, 255, 0, 0.4) 50%, transparent 100%);
  animation: heatPulse 4s ease-in-out infinite;
}

@keyframes heatPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 0.4; }
}

/* 地标图层 */
.landmarks-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.landmark {
  position: absolute;
  transform: translate(-50%, -50%);
}

.landmark-dot {
  width: 0.8vh;
  height: 0.8vh;
  background: #00d4ff;
  border-radius: 50%;
  box-shadow: 0 0 1vh rgba(0, 212, 255, 0.5);
}

.landmark-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: #00d4ff;
  white-space: nowrap;
  margin-top: 0.3vh;
}

/* 控制面板 */
.globe-controls {
  position: absolute;
  top: 1vh;
  right: 1vw;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  z-index: 100;
}

.control-group {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.5vh;
  padding: 0.5vh;
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.layer-controls {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.5vh;
  padding: 1vh;
  border: 1px solid rgba(0, 212, 255, 0.3);
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
}

.layer-controls .el-checkbox {
  font-size: 0.8rem;
}

/* 图例 */
.globe-legend {
  position: absolute;
  bottom: 1vh;
  left: 1vw;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 0.5vh;
  padding: 1vh;
  z-index: 100;
}

.legend-title {
  font-size: 0.9rem;
  color: #00d4ff;
  font-weight: 600;
  margin-bottom: 0.5vh;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 0.3vh;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.7rem;
  color: #bfcbd9;
}

.legend-color {
  width: 1vh;
  height: 1vh;
  border-radius: 50%;
}

.legend-color.track-aircraft {
  background: rgba(255, 170, 0, 0.8);
}

.legend-color.track-ship {
  background: rgba(0, 255, 136, 0.8);
}

.legend-color.track-vehicle {
  background: rgba(255, 100, 100, 0.8);
}

.legend-color.power-radar {
  background: rgba(255, 170, 0, 0.6);
  border: 1px solid rgba(255, 170, 0, 0.8);
}

.legend-color.power-comm {
  background: rgba(0, 255, 136, 0.6);
  border: 1px solid rgba(0, 255, 136, 0.8);
}

.legend-color.power-jammer {
  background: rgba(255, 100, 100, 0.6);
  border: 1px solid rgba(255, 100, 100, 0.8);
}

/* Element Plus 组件样式覆盖 */
.globe-controls :deep(.el-button) {
  background: rgba(0, 212, 255, 0.1) !important;
  border-color: rgba(0, 212, 255, 0.3) !important;
  color: #bfcbd9 !important;
}

.globe-controls :deep(.el-button:hover) {
  background: rgba(0, 212, 255, 0.2) !important;
  border-color: #00d4ff !important;
  color: #00d4ff !important;
}

.layer-controls :deep(.el-checkbox__label) {
  color: #bfcbd9 !important;
}

.layer-controls :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background: #00d4ff !important;
  border-color: #00d4ff !important;
}
</style>